<template>
    <div id="NewRepairSeverPage">
        <div class="bg">
            <!--            标题-->
            <div style="margin-bottom: 15px;">
                <router-link to="/repairsever"><el-button  style="float: right;margin-right: 15px;width: 80px;margin-top: 15px;">返回</el-button></router-link>
                <span style="display: inline-block;font-weight: 800;margin-left: 20px;font-size: 25px;margin-top: 15px;">新建维修工单</span>
            </div>
            <hr style="margin: 15px"/>

            <!--            1.基本信息  内容-->
            <div style="margin: 15px auto;padding: 5px">
                <div style="font-size: 23px;font-weight: 600;margin:5px 0px 40px 20px;">1.基本信息</div>
                <el-form :model="workord" >

                    <el-row style="margin-bottom: 15px">
                        <el-col class="NTtitle" :span="4">对应客户:</el-col>
                        <el-col :span="20">
                            <el-select v-model="workord.customer.customerId" value-key="customer_id" placeholder="请选择客户" @change="initContacts(),initPorList()">
                                <el-option v-for="item in customerList"
                                           :key="item.customer_id"
                                           :label="item.customer_name"
                                           :value="item.customer_id"></el-option>
                            </el-select>
                        </el-col>
                    </el-row>

                    <el-row style="margin-bottom: 15px">
                        <el-col class="NTtitle" :span="4">维修内容:</el-col>
                        <el-col :span="20">
                            <el-input
                                    v-model="workord.workTest"
                                    type="textarea"
                                    :autosize="{ minRows: 5, maxRows: 10}"
                                    placeholder="请输入内容"
                                    style="width: 625px" />
                        </el-col>
                    </el-row>


                    <el-row style="margin-bottom: 15px">
                        <el-col class="NTtitle" :span="4">选择客户联系人:</el-col>
                        <el-col :span="20">
                            <el-select v-model="workord.linkMan"  value-key="contactId" @change="contactPhone" placeholder="请选择联系人" >
                                <el-option v-for="item in contacts"
                                           :key="item.contactId"
                                           :label="item.contactName"
                                           :value="item"></el-option>
                            </el-select>
                        </el-col>
                    </el-row>


                    <el-row style="margin-bottom: 15px">
                        <el-col class="NTtitle" :span="4">联系人电话:</el-col>
                        <el-col :span="20">
                            <el-input v-model.number="workord.linkWay" type="text" placeholder="不填为系统预存联系方式" style="width: 625px" />
                        </el-col>
                    </el-row>

                </el-form>
                <div style="margin: 0px auto;text-align: center;padding-top: 40px">
                    <el-button @click="addOne()" type="primary">下一步<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                </div>
                <hr style="margin: 15px"/>
            </div>

            <!--            2.工单详细信息  内容-->
            <div id="workord2" style="margin: 15px auto;padding: 5px;display: none">
                <div style="font-size: 23px;font-weight: 600;margin:5px 0px 40px 20px;">2.工单详情</div>
                <el-form :model="serDetail" >

                    <el-row style="margin-bottom: 15px">
                        <el-col class="NTtitle" :span="4">维修产品:</el-col>
                        <el-col :span="20">
                            <el-select v-model="serDetail.product.productId" value-key="productList" placeholder="请选择产品" >
                                <el-option v-for="item in productList"
                                           :key="item.productId"
                                           :label="item.productName"
                                           :value="item.productId"></el-option>
                            </el-select>
                        </el-col>
                    </el-row>

                    <el-row style="margin-bottom: 15px">
                        <el-col class="NTtitle" :span="4">产品序列号:</el-col>
                        <el-col :span="20">
                            <el-input v-model="serDetail.proDetailNumber" placeholder="请输入序列号"  style="width: 620px"></el-input>
                        </el-col>
                    </el-row>

                    <el-row style="margin-bottom: 15px">
                        <el-col class="NTtitle" :span="4">产品生产日期:</el-col>
                        <el-col :span="6">
                            <el-date-picker
                                    v-model="serDetail.productDate"
                                    type="date"
                                    placeholder="选择日期">
                            </el-date-picker>
                        </el-col>
                        <el-col class="NTtitle" :span="4">产品售出日期:</el-col>
                        <el-col :span="6">
                            <el-date-picker
                                    v-model="serDetail.saleDate"
                                    type="date"
                                    placeholder="选择日期">
                            </el-date-picker>
                        </el-col>
                    </el-row>

                    <el-row style="margin-bottom: 15px">
                        <el-col class="NTtitle" :span="4">保修状况:</el-col>
                        <el-col :span="20">
                            <el-input
                                    v-model="serDetail.stateBao"
                                    type="textarea"
                                    :autosize="{ minRows: 5, maxRows: 10}"
                                    placeholder="请输入内容"
                                    style="width: 625px" />
                        </el-col>
                    </el-row>

                    <el-row style="margin-bottom: 15px">
                        <el-col class="NTtitle" :span="4">故障描述:</el-col>
                        <el-col :span="20">
                            <el-input
                                    v-model="serDetail.desFault"
                                    type="textarea"
                                    :autosize="{ minRows: 5, maxRows: 10}"
                                    placeholder="请输入内容"
                                    style="width: 625px" />
                        </el-col>
                    </el-row>

                    <el-row style="margin-bottom: 15px">
                        <el-col class="NTtitle" :span="4">沟通要点:</el-col>
                        <el-col :span="20">
                            <el-input
                                    v-model="serDetail.pointTalk"
                                    type="textarea"
                                    :autosize="{ minRows: 5, maxRows: 10}"
                                    placeholder="请输入内容"
                                    style="width: 625px" />
                        </el-col>
                    </el-row>

                    <el-row style="margin-bottom: 15px">
                        <el-col class="NTtitle" :span="4">承接部门:</el-col>
                        <el-col :span="20">
                            <el-select v-model="serDetail.department.departmentId" value-key="departmentId" placeholder="请选择部门" >
                                <el-option v-for="item in departmentList"
                                           :key="item.departmentId"
                                           :label="item.departmentName"
                                           :value="item.departmentId"></el-option>
                            </el-select>
                        </el-col>
                    </el-row>

                    <el-row style="margin-bottom: 15px">
                        <el-col class="NTtitle" :span="4">备注:</el-col>
                        <el-col :span="20">
                            <el-input
                                    v-model="serDetail.weiSchedule"
                                    type="textarea"
                                    :autosize="{ minRows: 5, maxRows: 10}"
                                    placeholder="请输入内容"
                                    style="width: 625px" />
                        </el-col>
                    </el-row>

                </el-form>
                <div style="margin: 0px auto;text-align: center;padding-top: 40px">
                    <el-button @click="addTwo" type="primary">下一步<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                </div>
                <hr style="margin: 15px"/>
            </div>

            <!--            3.维修费用-->
            <div id="workord3" style="margin: 15px auto;padding: 5px;display: none">
                <div style="font-size: 23px;font-weight: 600;margin:5px 0px 40px 20px;">3.费用与执行</div>
                <el-form :model="costRecord">

                    <el-row style="margin-bottom: 15px">
                        <el-col class="NTtitle" :span="4">状态:</el-col>
                        <el-col :span="20">
                            <el-select v-model="costRecord.costState" placeholder="请选择状态" >
                                <el-option label="执行中" value="1"></el-option>
                                <el-option label="结束" value="2"></el-option>
                                <el-option label="意外终止" value="3"></el-option>
                            </el-select>
                        </el-col>
                    </el-row>

                    <el-row style="margin-bottom: 15px">
                        <el-col class="NTtitle" :span="4">费用:</el-col>
                        <el-col :span="20">
                            <el-input v-model="costRecord.costMon" type="text"  style="width: 625px" />
                        </el-col>
                    </el-row>

                    <el-row style="margin-bottom: 15px">
                        <el-col class="NTtitle" :span="4">已交费用:</el-col>
                        <el-col :span="20">
                            <el-input v-model="costRecord.costMoned" type="text"  style="width: 625px" />
                        </el-col>
                    </el-row>

                    <el-row style="margin-bottom: 15px">
                        <el-col class="NTtitle" :span="4">预约交付日期日期:</el-col>
                        <el-col :span="20">
                            <el-date-picker
                                    v-model="costRecord.costAppoint"
                                    type="date"
                                    placeholder="选择日期">
                            </el-date-picker>
                            <!--                            <el-input v-model="" type="date"  style="width: 625px"/>-->
                        </el-col>
                    </el-row>

                    <el-row style="margin-bottom: 15px">
                        <el-col class="NTtitle" :span="4">毛利:</el-col>
                        <el-col :span="20">
                            <el-input v-model="costRecord.costGross" type="text" placeholder="系统可自动计算 " style="width: 625px" />
                        </el-col>
                    </el-row>

                    <el-row style="margin-bottom: 15px">
                        <el-col class="NTtitle" :span="4">备注:</el-col>
                        <el-col :span="20">
                            <el-input
                                    v-model="costRecord.remark"
                                    type="textarea"
                                    :autosize="{ minRows: 5, maxRows: 10}"
                                    placeholder="请输入内容"
                                    style="width: 625px" />
                        </el-col>
                    </el-row>

                </el-form>
                <div style="margin: 0px auto;text-align: center;padding-top: 40px">
                    <el-button @click="addThree" type="primary">提交</el-button>
                </div>
                <hr style="margin: 15px"/>
            </div>
            <br/><br/><br/>
        </div>
    </div>
</template>

<script>
    export default {
        name: "NewRepairSeverPage",
        data: function () {
            return{
                workord:{
                    workordId:0,
                    takeTime:'',
                    workTest:'',
                    linkWay:'',
                    weiState:'待审批',
                    check:0,
                    linkMan:{
                        contactId:0
                    },
                    emp:{
                        empId:1
                    },
                    customer:{
                        customerId:0
                    }
                },
                serDetail:{
                    serDetailId:0,
                    proDetailNumber:'',
                    productDate:'',
                    saleDate:'',
                    stateBao:'',
                    desFault:'',
                    pointTalk:'',
                    weiSchedule:'',
                    workord:{},
                    product:{},
                    department:{}
                },
                costRecord:{
                    costRecId:0,
                    costMon:'',
                    costMoned:'',
                    costState:'',
                    costAppoint:'',
                    costGross:'',
                    remark:'',
                    workord:{}
                },
                customerList:{},//客户集合
                contacts:{},//联系人集合
                productList:{},//根据客户查出的商品集合
                departmentList:{},//部门集合
                resWorkordId:0
            }
        },
        methods:{
            addOne(){
                this.$axios.post("api/after-sale/workord/add-workord",this.workord)
                    .then(v=>{
                        //获取返回的id
                        this.resWorkordId = v.data.resWorkord;
                        this.global.mes_success("添加成功！")
                    }).catch();
                var w2 = document.getElementById("workord2");
                w2.style.display="block";
            },
            addTwo(){
                this.serDetail.workord.workordId = this.resWorkordId;
                this.$axios.post("api/after-sale/workord/add-serDetail",this.serDetail)
                    .then(v=>{
                        this.global.mes_success("添加成功！")
                    }).catch();
                var w3 = document.getElementById("workord3");
                w3.style.display="block";

            },
            addThree(){
                this.costRecord.workord.workordId = this.resWorkordId;
                this.$axios.post("api/after-sale/workord/add-costRecord",this.costRecord)
                    .then(v=>{
                        this.global.mes_success("添加成功！")
                        //重置数据
                        this.workord = {
                            workordId:0,
                            takeTime:'',
                            linktype:'',
                            linkman:'',
                            emp:{
                                empId:0
                            },
                            customer:{
                                customerId:0
                            }
                        };
                        this.serDetail = {
                            serDetailId:0,
                            proDetailNumber:'',
                            productDate:'',
                            saleDate:'',
                            stateBao:'',
                            desFault:'',
                            pointTalk:'',
                            weiSchedule:'',
                            workord:{},
                            product:{},
                            department:{}
                        };
                        this.costRecord = {
                            costRecId:0,
                            costMon:'',
                            costMoned:'',
                            costState:'',
                            costAppoint:'',
                            costGross:'',
                            remark:'',
                            workord:{}
                        };
                        this.$router.push({path:"/repairsever"});

                    }).catch();
                // var w3 = document.getElementById("workord3");
                // w3.style.display="block";


            },
            initContacts(){
                this.$axios.get("api/customer/hisLinkMan",{params:{customerId:this.workord.customer.customerId}})
                    .then(v=>{
                        this.contacts = v.data;
                    }).catch();
            },
            initCusList(){
                this.$axios.get("api/after-sale/workord/proCusforContract")
                    .then(v=>{
                        this.customerList = v.data;
                    }).catch();
            },
            initPorList(){
                this.$axios.get("api/after-sale/workord/proListforCus",{params:{customerId:this.workord.customer.customerId}})
                    .then(v=>{
                        this.productList = v.data;
                    }).catch();
            },
            initDeptList(){
                this.$axios.get("api/dept-alllist")
                    .then(v=>{
                        this.departmentList = v.data;
                    }).catch();
            },
            contactPhone(row){
                console.log(row);
                this.workord.linkWay = row.contactPhone;
            }
        },
        created() {
            this.initCusList();
            this.initDeptList();
        }
    }
</script>

<style scoped>
    *{
        margin: 0;
        padding: 0;
        font-size: 14px;
    }
    #NewRepairSeverPage{
        width: 100%;
    }
    .bg{
        background-color: white;
        margin: 20px;
        min-height: 800px;
    }
    .NTtitle{
        text-align: right;
        padding-right: 10px;
        font-size: 18px;
    }
</style>